<template>
  <div class="flex height-80">
    <div class="logo-img">
      <router-link to="/">
        <img v-if="logoUrl" :src="logoUrl" alt="" class="height-31">
      </router-link>
    </div>
    <div class="flex-item" />
    <div class="back-txt cursor-p" @click="backHome">
      返回{{websiteTitle}}首页
    </div>
  </div>
</template>

<script lang="ts">
  import {
    useRouter
  } from 'vue-router'
  import {
    defineComponent,
    onMounted,
    ref
  } from 'vue'
  import {
    useState
  } from '@/store/utils/useState'
  export default defineComponent({
    name: 'LogoBar',
    setup() {
      const router = useRouter()
      const logoUrl = ref('')
      const websiteTitle = ref('')
      const storeState = useState('enterpriseConfig', ['enterpriseConfig'])
      onMounted(() => {
        logoUrl.value = storeState.enterpriseConfig.value.websiteDefaultLogo
        websiteTitle.value = storeState.enterpriseConfig.value.websiteTitle
      })
      const backHome = () => {
        router.push({
          path: '/'
        })
      }

      return {
        logoUrl,
        websiteTitle,
        backHome,
        ...storeState
      }
    }
  })
</script>

<style lang="scss" scoped>
  $darkBlue: #182245;

  .logo-img {
    padding-top: 27px;

    a {
      display: block;
    }
  }

  .back-txt {
    margin-top: 36px;
    margin-right: 50px;
    padding: 13px 0 13px 0;
  }
</style>
